import { defineComponent, ref } from "vue";
import Maincontainer from "@/components/maincontainer/index"
import { NButton, NButtonGroup, NGi, NGrid, NFormItem, NRadio, NRadioGroup, NRadioButton, NInput, NUpload, NUploadDragger, NIcon, NText, NP, NDatePicker, NForm, FormRules, } from "naive-ui";
export default defineComponent({
    name: "Wikimanager",
    setup() {
        // 表单数据
        const formValue = ref<any>({})
        // 表单校验
        const rules=ref<FormRules>({

        })
        const shauxin = () => {
            console.log(formValue.value, "现在的数据");
        }
        // logo类型
        const logotypeList = ref([
            { label: "文字", value: "1" },
            { label: "图片", value: "2" },
        ])
        // 编辑状态
        const status = ref(false)
        return () => (<Maincontainer>
            <NForm model={formValue.value} labelPlacement={"left"} labelWidth={120} rules={rules.value}>
                <NGrid x-gap={10} y-gap={10} class="px-10px pt-10px">
                    <NGi span={24}>
                        <NButtonGroup>
                            <NButton type={status.value ? "default" : "primary"} onClick={() => status.value = false}>查看</NButton>
                            <NButton type={status.value ? "primary" : "default"} onClick={() => status.value = true}>编辑</NButton>
                        </NButtonGroup>
                    </NGi>
                    <NGi span={24}>
                        <NFormItem label={"logo类型："}  labelPlacement={"left"} path={"logotype"}>
                            <NRadioGroup v-model={[formValue.value["logotype"], "value"]} onChange={shauxin} name={"radiobuttongroup1"} size={"small"}>
                                {logotypeList.value.map(item => {
                                    return <NRadio label={item.label} value={item.value} />
                                })}
                            </NRadioGroup>
                        </NFormItem>
                    </NGi>
                    {formValue.value["logotype"] === "1" ? <NGi span={24}>
                        <NFormItem label={"logo文字："}  labelPlacement={"left"} path={"logotext"}>
                            <NInput v-model={[formValue.value["logotext"], "value"]} placeholder={"请输入logo文字"} class="max-w-400px" />
                        </NFormItem>
                    </NGi> : formValue.value["logotype"] === "2" ? <NGi span={24}>
                        <NFormItem label={"logo图片："}  labelPlacement={"left"} path={"logoimg"}>
                            <NUpload
                                directory-dnd={true}
                                action={"https://www.mocky.io/v2/5e4bafc63120007120d8b70f"}
                                class="max-w-400px"
                            >
                                <NUploadDragger>
                                    <div style="margin-bottom: 12px">
                                        <NIcon size={48} depth={3}>
                                            <archive-icon />
                                        </NIcon>
                                    </div>
                                    <NText style="font-size: 16px">
                                        点击或者拖动文件到该区域来上传
                                    </NText>
                                    <NP depth={3} style="margin: 8px 0 0 0">
                                        请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                                    </NP>
                                </NUploadDragger>
                            </NUpload>
                        </NFormItem>
                    </NGi> : null}
                    <NGi span={24}>
                        <NFormItem label={"站点创建时间："}  labelPlacement={"left"}  path={"createTime"}>
                            <NDatePicker v-model={[formValue.value["createTime"], "value"]} type={"date"} placeholder={"请选择站点创建时间"} class="max-w-400px" />
                        </NFormItem>
                    </NGi>
                    <NGi span={24}>
                        <NFormItem label={"作者简介："}  labelPlacement={"left"} path={"jianjie"}>
                            <NInput type={"textarea"} v-model={[formValue.value["jianjie"], "value"]} placeholder={"请输入作者简介"} class="max-w-400px" />
                        </NFormItem>
                    </NGi>
                    <NGi span={24}>
                        <NFormItem label={"封面图片："}  labelPlacement={"left"} path={"fengmian"}>
                            <NUpload
                                directory-dnd={true}
                                action={"https://www.mocky.io/v2/5e4bafc63120007120d8b70f"}
                                class="max-w-400px"
                            >
                                <NUploadDragger>
                                    <div style="margin-bottom: 12px">
                                        <NIcon size={48} depth={3}>
                                            <archive-icon />
                                        </NIcon>
                                    </div>
                                    <NText style="font-size: 16px">
                                        点击或者拖动文件到该区域来上传
                                    </NText>
                                    <NP depth={3} style="margin: 8px 0 0 0">
                                        请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                                    </NP>
                                </NUploadDragger>
                            </NUpload>
                        </NFormItem>
                    </NGi>
                </NGrid>
            </NForm>
        </Maincontainer >)
    }
})